<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>坦克大战排名榜</title>
</head>

<body>
    <div class="main">
        <div class="title">
            <img src=""
                alt="" />
            <div>坦克大战排名榜</div>
        </div>
        <div class="list-box">
            <?php
                require_once('./server/conn.php');
                $sql = "select * from user";
                $user = $conn->query($sql);
                if($user->num_rows > 0){
                    $arr;
                    while($row1 = $user->fetch_assoc()){
                        $arr[] = $row1;
                    }
                    function sortByKeyDesc($arr, $key) {
                        array_multisort(array_column($arr, $key), SORT_DESC, $arr);
                        return $arr;
                    }
                    //把数组arr按照priority的值降序(从大到小)排序
                    $arr = sortByKeyDesc($arr, 'gra');
                    $i=1;
                    $j=0;
                    while(count($arr)>=$i){
                        $row=$arr[$j];
                        $i++;
                        $j++;
                        ?>
                        <div class="list">
                            <div class="number"><?php echo $j ?></div>
                            <div class="user">
                                <img src="images/<?php echo $row['id'] ?>.jpg" class="head-url" alt="" />
                                
                                <img src="./img/<?php echo $j ?>.png"  alt="" class="level" />
                                <div>
                                    <p class="good"><?php echo $row['us'] ?></p>
                                    <p class="jk-num">
                                        <span>
                                            <?php
                                                switch ($j)
                                                {
                                                case "1":
                                                    echo "王者";
                                                    break;
                                                case "2":
                                                    echo "钻石";
                                                    break;
                                                case "3":
                                                    echo "铂金";
                                                    break;
                                                default: 
                                                    echo "加油";
                                                }
                                                
                                            ?>
                                        </span>J K 0 0
                                        <?php echo $j?>
                                    </p>
                                    
                                </div>
                            </div>
                            <span class="intro" >个性签名：<?php echo $row['intro'] ?></span>
                            <div class="km"><?php echo $row['gra'] ?></div>
                        </div>
                        <?php
                    }
                }
                $conn->close();
            ?>
        </div>
    </div>
    
</body>

</html>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .main {
        background-color: rgb(255, 228, 17);
        width: auto;
        min-height: 100vh;
        overflow: hidden;
        padding: 20px;
        box-sizing: border-box;
        color: #fff;
    }

    .main .title {
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main .title img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }

    .main .list-box {
        margin: 25px 0;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 16px;
    }

    .main .list-box .list {
        display: flex;
        align-items: center;
        padding: 20px 10px;
        color: #666;
        box-sizing: border-box;
    }

    .main .list-box .list .number {
        width: 25px;
        text-align: left;
        color: #888;
        font-size: 14px;
    }

    .main .list-box .list .user {
        display: flex;
        align-items: center;
        position: relative;
    }

    .main .list-box .list .user .head-url {
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 20px;
        border-radius: 50%;
    }

    .main .list-box .list .user .level {
        display: block;
        position: absolute;
        top: -7.5px;
        left: -7.5px;
        width: 25px;
        z-index: 10;
    }

    .main .list-box .list .user .good {
        font-weight: bold;
    }

    .main .list-box .list .user div {
        min-width: 0;
        flex: 1;


    }

    .main .list-box .list .user div .jk-num {
        margin-top: 10px;
        font-size: 10px;
        color: rgb(190, 190, 190);


    }

    .main .list-box .list .user div span {
        margin-right: 10px;
        font-size:16px;
        color: rgb(238, 76, 76);
    }
    .main .list-box .list .intro {
        margin-left:30px;
        font-size: 10px;
        color: rgb(238, 76, 76);
    }

    .main .list-box .list .km {
        margin-left: auto;
        padding-right:15px;
        font-size: 14px;
    }

</style>